<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01、vue的入门案例.html</title>
</head>
<body>
<!--第三步：指定vue从那个dom元素进行渲染和管理  ------------  view角色-->
<div id="app">
    <!--简单插值-->
    <h1>{{message}}</h1>
    <!--支持三目运行算-->
    <p>{{male == 0 ? "女" : "男"}}</p>
    <!--调用js函数-->
    <p>{{message.toUpperCase()}}</p>
    <p>{{message.split("").reverse().join("")}}</p>
    <!--也支持四则运算-->
    <p>{{money + num}}</p>
    <p>{{money - num}}</p>
    <p>{{money * num}}</p>
    <p>{{money / num}}</p>
    <p>{{money % num}}</p>
</div>
<!--第一步：引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步：初始化一个vue实例-->
<script>
    //怎么去理解mvvm
    const vm = new Vue({//--------------vm角色
        el: "#app",
        // 数据模型
        data: {//------------------------model的角色
            message: "Hello Vue3.x",
            money: 12.3,
            num: 11,
            male: 0
        }
    })
</script>
</body>
</html>